<template>
  <div>
    <div class="box">
      <div class="storage leading-[40px]">功能说明</div>
      <div class="storage leading-[40px]">操作</div>
    </div>
    <div class="box mt-[-1px]">
      <div class="storage leading-[50px]">
        <span class="text-[red]">*</span> 是否启动云存储
      </div>
      <div class="storage leading-[50px]">
        <el-radio-group v-model="storageFlag" class="ml-4">
          <el-radio :label="true" size="large">是</el-radio>
          <el-radio :label="false" size="large">否</el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="box mt-[-1px]" v-if="storageFlag">
      <div class="storage leading-[50px]">
        <span class="text-[red]">*</span> 云存储类型
      </div>
      <div class="storage leading-[50px]">
        <el-select v-model="optionsValue" clearable @change="storageType">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div v-if="storageFlag">
      <div class="box mt-[-1px]" v-for="item in renderList" :key="item">
        <div class="storage leading-[50px]">
          <span class="text-[red]">*</span> {{ item.label }}
        </div>
        <div class="storage leading-[50px]">
          <el-input
            v-model="item.input"
            autocomplete="off"
            :spellcheck="false"
          />
        </div>
      </div>
    </div>
    <el-button type="primary" style="margin: 16px 0 15px" @click="submit"
      >保存设置</el-button
    >
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  getCloudStorageSupport,
  getStorageSetting,
  editStorageSetting
} from "@/api/system";
import { optionsT } from "@/type/system";
import { ElMessage } from "element-plus";
const storageFlag = ref<boolean>(false);
const options = ref<optionsT[]>([]);
const storageRenderList = ref<any[]>();
const renderList = ref<any[]>();
const renderValue = ref<any[]>();
const optionsValue = ref<any>();
const formData = ref<any>({});

/**初始化数据 */
const getData = async () => {
  const res = await getCloudStorageSupport();
  const res1 = await getStorageSetting();
  options.value = res.result.map(item => {
    return item.driver;
  });
  storageRenderList.value = res.result;
  optionsValue.value = res1.result.driver;
  storageFlag.value = res1.result.driver !== "";
  renderValue.value = res1.result;
  storageType();
};

/**保存提示处理 */
const submit = async () => {
  const submitData: any = {};
  let index = -1;
  if (storageFlag.value) {
    if (optionsValue.value != "") {
      renderList.value.forEach(item => {
        formData.value[item.value] = item.input;
      });
      index = renderList.value.findIndex(item => {
        return item.input === "";
      });
      submitData.driver = optionsValue.value;
      submitData[optionsValue.value] = formData.value;
      if (index != -1) {
        ElMessage.error(renderList.value[index].label + "不能为空");
      } else {
        saveAsk(submitData);
      }
    } else {
      ElMessage.error("请选择云储存类型");
    }
  } else {
    submitData.driver = "";
    saveAsk(submitData);
  }
};

/**保存请求 */
const saveAsk = async data => {
  const res = await editStorageSetting(data);
  if (res.code === 0) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
  } else {
    ElMessage.error(res.message);
  }
};

/**根据云储存类型渲染对应的数据 */
const storageType = () => {
  renderList.value = storageRenderList.value
    .filter(item => {
      if (optionsValue.value === item.driver.value) {
        return item;
      }
    })
    .map(items => {
      return items.fields;
    })
    .flat();
  renderList.value.forEach(item => {
    item.input = "";
  });
  if (storageFlag.value) {
    renderList.value.forEach(item => {
      for (const key in renderValue.value[optionsValue.value]) {
        if (item.value === key) {
          item.input = renderValue.value[optionsValue.value][key];
        }
      }
    });
  }
};

onMounted(() => {
  getData();
});
</script>
<style scoped lang="scss">
.storage {
  width: 200px;
  padding: 0 10px;
  font-size: 14px;
  border-right: 1px solid #e4e7ed;
}

.box {
  display: flex;
  border: 1px solid #e4e7ed;
}
</style>
